
// 操作状态：拖拽、移动、绘制、缩放
var STATUS = {
    IDLE: 0, // 无
    DRAG: 1, // 拖拽
    DRAW: 3, // 画笔
    MOVE: 4, // 移动
}

class DrawCanvas {
    // 画笔类型
    #bursh_type = {
        drawCircle: 'drawCircle',
        drawCircleArea: 'drawCircleArea',
        drawellipse: 'drawellipse',
    }
    bursh = "drawCircle" // 当前所选的画笔类型

    // 拖拽元素
    #dragStatus = 0;
    #mouseStartPostion = null;
    #mouseLastPostion = null;
    #dragTarget = {
        status: 0,
        info: null,
        lastPosition: null
    }

    status = 3; // 操作状态(默认画笔)
    #path = null; // 图形路径存储(临时)
    // 图形数据存储
    undoList = []; // 用于保存所有操作，用于撤销和恢复
    redoList = []; // 用于保存所有撤销的操作，用于恢复

    // 创建和初始化在类中创建的对象。
    constructor(config) {
        const { strokeStyle, lineWidth } = config;
        this.strokeStyle = strokeStyle;
        this.lineWidth = lineWidth;
    }

    // 初始化
    init(id) {
        this.canvas = document.getElementById(id)
        this.canvas.width = this.canvas.parentNode.offsetWidth; // 获取父级的宽高
        this.canvas.height = this.canvas.parentNode.offsetHeight;
        this.ctx = canvas.getContext("2d");

        // 计算鼠标坐标位置
        function getMousedownOffet(e) {
            return {
                x: e.offsetX, // canvas.getBoundingClientRect().left
                y: e.offsetY, // canvas.getBoundingClientRect().top
            };
        }

        // 鼠标按下事件
        canvas.addEventListener("mousedown", (e) => {
            const canvasPostion = getMousedownOffet(e);
            this.#mouseStartPostion = canvasPostion;
            if (this.status === STATUS.MOVE) {
                // 移动路径
                const pitchPathRef = this.#isPitchPath(canvasPostion);
                console.log(pitchPathRef)
                if (pitchPathRef) {
                    console.log(pitchPathRef)
                    // drageConfig.dragTarget = isAboveRef;
                    // drageConfig.status = drageStatus.START;
                    // drageConfig.lastPosition = canvasPostion;
                }
            }
        });
        // 鼠标移动
        canvas.addEventListener("mousemove", (e) => {
            const slip = 5; // 防止误操作
            const canvasPostion = getMousedownOffet(e);
            this.#mouseLastPostion = canvasPostion;

            if (this.#mouseStartPostion && (Math.abs(this.#mouseStartPostion.x - this.#mouseLastPostion.x || Math.abs(this.#mouseStartPostion.y - this.#mouseLastPostion.y) > slip) > slip)) {

                if (this.status === STATUS.DRAW) {
                    // 画笔
                    this.draw(this.bursh, this.#mouseStartPostion, this.#mouseLastPostion)
                }

                if (this.status === STATUS.MOVE) {
                    // 移动

                }

            } else if (this.#mouseStartPostion) {
                console.log('try to drag')
            }
        });
        // 鼠标释放
        canvas.addEventListener("mouseup", (e) => {
            this.#saveDrawPath()
            this.#mouseStartPostion = null;
        });
        // 鼠标离开画布
        canvas.addEventListener('mouseleave', (e) => {
            this.#saveDrawPath()
            this.#mouseStartPostion = null;
        })
    }

    // 绘制已保存的全部的图形
    #drawHistory() {
        this.undoList.forEach(path => {
            this._draw_bursh_path(path.bursh, path)
        })
    }
    // 保存画笔路径
    #saveDrawPath() {
        if (this.#path) {
            this.undoList.push(this.#path)
        }
    }
    #getDistance(p1, p2) {
        return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
    }
    // 查看鼠标是否选中图形
    #isPitchPath(position) {
        for (let i = 0; i < this.undoList.length; i++) {
            try {
                console.log(this.undoList[i])
                if (this.#getDistance(position, this.undoList[i]) <= this.undoList[i].r) {
                    return undoList[i];
                }
            } catch (error) {
                return false;
            }
        }
        return false;
    }
    // 撤销
    revocation() {
        let res = this.undoList.pop()
        if (res) {
            this.undoList.slice(0, this.undoList.length)
            this.redoList.push(res)
            this.ctx.clearRect(0, 0, canvas.width, canvas.height);
            this.#drawHistory()
        }
    }
    //恢复
    recover() {
        let res = this.redoList.pop()
        if (res) {
            this.undoList.push(res)
            this.ctx.clearRect(0, 0, canvas.width, canvas.height);
            this.#drawHistory()
        }
    }
    // 移动
    move() {
        this.status = STATUS.MOVE;
        console.log(this.status)
    }
    // 绘制图形
    draw(bursh, start, last) {
        this.ctx.clearRect(0, 0, canvas.width, canvas.height);
        if (bursh === this.#bursh_type.drawCircle) {
            this.#path = {
                bursh,
                x: start.x,
                y: start.y,
                r: Math.abs(start.y - last.y)
            }
            this._draw_bursh_path(bursh, this.#path)
        }
        if (bursh === this.#bursh_type.drawCircleArea) {
            this.#path = {
                bursh,
                x: start.x,
                y: start.y,
                r: Math.abs(start.y - last.y)
            }
            this._draw_bursh_path(bursh, this.#path)
        }
        if (bursh === this.#bursh_type.drawellipse) {
            this.#path = {
                bursh,
                x: start.x,
                y: start.y,
                axisx: Math.abs(start.x - last.x),
                axisy: Math.abs(start.y - last.y)
            }
            this._draw_bursh_path(bursh, this.#path)
        }
        this.#drawHistory()
    }
    // 绘制具体的图形
    _draw_bursh_path(bursh, path) {
        if (bursh === this.#bursh_type.drawCircle) {
            this.drawCircle(path.x, path.y, path.r);
        }
        if (bursh === this.#bursh_type.drawCircleArea) {
            this.drawCircleArea(path.x, path.y, path.r);
        }
        if (bursh === this.#bursh_type.drawellipse) {
            this.drawellipse(path.x, path.y, path.axisx, path.axisy);
        }
    }
    //绘制圆
    drawCircle(x, y, r) {
        this.ctx.save();
        this.ctx.beginPath();
        this.ctx.lineWidth = this.lineWidth; // 设置线的宽度
        this.ctx.strokeStyle = this.strokeStyle;
        this.ctx.arc(x + r, y + r, r, 0, 2 * Math.PI);
        this.ctx.stroke();
        this.ctx.closePath();
        this.ctx.restore();
    }

    //绘制圆形
    drawCircleArea(x, y, r) {
        this.ctx.save();
        this.ctx.beginPath();
        this.ctx.fillStyle = this.strokeStyle;
        this.ctx.arc(x + r, y + r, r, 0, 2 * Math.PI);
        this.ctx.fill();
        this.ctx.closePath();
        this.ctx.restore();
    }

    //绘制椭圆线
    drawellipse(x, y, axisx, axisy) {
        this.ctx.save();
        this.ctx.beginPath(); //开始绘制椭圆线
        this.ctx.lineWidth = this.lineWidth; // 设置线的宽度
        this.ctx.strokeStyle = this.strokeStyle;
        this.ctx.ellipse(x, y, axisx, axisy, 0, 0, 2 * Math.PI);
        this.ctx.stroke();
        this.ctx.closePath();
        this.ctx.restore();
    }

}

export default DrawCanvas